<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>简单的JS基础幻灯片</title>
    <link rel="stylesheet" type="text/css" href="js.css">
</head>

<body>
    <div class="slide">
        <ul>
            <li style="display: block;">
                <img src="1.jpg">
            </li>
            <li>
                <img src="2.jpg">
            </li>
            <li>
                <img src="3.jpg">
            </li>
            <li>
                <img src="4.jpg">
            </li>
            <li>
                <img src="5.jpg">
            </li>
        </ul>
        <span class="pre"> < </span>
        <span class="next"> > </span>
    </div>
    <script>
        // var slide = document.querySelector("ul");
        // var lis = slide.children;
        // var pre = document.querySelector(".pre");
        // var next = document.querySelector(".next");
        // pre.onclick = function() {
        //     lis[1].style.display = "block";
        // }
        let index = 0; //当前索引
        var pre = document.getElementsByClassName("pre")[0];
        var next = document.getElementsByClassName("next")[0];
        var lis = document.getElementsByClassName("slide")[0].children[0].children;
        next.onclick = function() {
            index++;
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.display = "none";
            }
            // index = index + 1 == lis.length ? 0 : index;最后一张则回到第一张
            if (index == lis.length) {
                index = 0;
            }
            lis[index].style.display = "block";

        }
        pre.onclick = function() {
            index--;
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.display = "none";
            }
            // index = index + 1 == lis.length ? 0 : index;第一张上一张则为最后一张
            if (index < 0) {
                index = lis.length - 1;
            }
            lis[index].style.display = "block";
        }

        function auto() {
            next.click();
        }
        let s = setInterval("auto()", 2000);
        for (let i = 0; i < lis.length; i++) {
            lis[i].onmouseenter = function() {
                clearInterval(s);
            }
            lis[i].onmouseleave = function() {
                s = setInterval("auto()", 2000);
            }

        }
    </script>

</body>

</html>